<template>
	<div id="app" v-bind:style="styleobj" v-on:mouseenter="mouseenter" v-on:mouseleave="mouseout" v-on:click="jumpToDetail">
		
		<div id="list" >
		<el-row>
		  <el-col :span="5"><i class="el-icon-paperclip"></i></el-col>
		  <el-col :span="3">{{article.submitTime}}</el-col>
		  <el-col :span="5" >{{article.author}}</el-col>
		  <el-col :span="11"><font size="4">{{article.title}}</font></el-col>
		</el-row>
		
	</div>

	</div>
	
</template>

<script>
	export default{
		name:'articlelist',
		props:{article:Object},
		data:function(){
			return {
				styleobj:{
					padding: '1em 0em 1em 0em',
					cursor:'default',
					background:'white'
			
				}
			}
		},
		methods:{
			mouseenter:function(){
				this.styleobj.cursor='pointer'
				this.styleobj.background='#ebf6f7'
			},
			mouseout:function(){
				this.styleobj.cursor='default'
				this.styleobj.background='white'
			},
			jumpToDetail:function(){
				
				this.$router.push({ name:"article",query: { articleId:this.article.articleId  }})	
			}
		}
		
	}
	
	
</script>

<style>
	

	
</style>
